<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import TopNavbar from './components/common/TopNavbar.vue'
import Footer from './components/common/Footer.vue'

const route = useRoute()

// 需要隐藏导航栏和页脚的页面
const hideLayoutPages = ['/login', '/dingtalk-login', '/login-success']
const shouldHideLayout = computed(() => {
  const isEnterprise = route.path.startsWith('/enterprise')
  return isEnterprise || hideLayoutPages.includes(route.path)
})
</script>

<template>
  <div class="app-container">
    <TopNavbar v-if="!shouldHideLayout" />
    <main class="main-content" :class="{ 'full-screen': shouldHideLayout }">
      <router-view></router-view>
    </main>
    <Footer v-if="!shouldHideLayout" />
  </div>
</template>

<!--<script setup>-->
<!--// 无需额外逻辑，仅作为布局容器-->
<!--</script>-->

<style scoped>
/* 全局布局样式 */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 导航栏样式 */
.navbar {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo {
  font-size: 20px;
  color: #333;
  margin: 0;
  font-weight: 600;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-link {
  color: #555;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 6px 0;
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: #42b983;
}

.nav-link.active {
  color: #42b983;
  border-bottom: 2px solid #42b983;
}

/* 内容区域样式 */
.content {
  flex: 1;
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

/* 全屏内容区域（登录页等） */
.main-content.full-screen {
  flex: 1;
  padding: 0;
  margin: 0;
}

/* 页脚样式 */
.footer {
  background-color: #ffffff;
  padding: 20px 0;
  margin-top: 50px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}
</style>